<template>
  <div class="detail-container">
    <v-merchant-card :userInfo="userInfo"/>
    <div class="content fx-1">
      <el-menu :default-active="activeRouter" mode="horizontal" class="bdr-top-10" in>
        <el-menu-item v-for="item in tabs" :key="item.path" :index="item.path">{{item.name}}</el-menu-item>
      </el-menu>
      <v-salesmen-list />
    </div>
  </div>
</template>

<script lang="ts">
  import { Vue, Component } from 'vue-property-decorator'
  import vMerchantCard from '@/components/merchant-card'
  import vSalesmenList from '../list'

  @Component({
    components: {
      vMerchantCard,
      vSalesmenList
    }
  })
  export default class MerchantsDetail extends Vue {
    get activeRouter () {
      // return this.tabs[this.$route.meta.active].path
    }

    tabs = [
      {
        path: './salesman-info',
        name: '业务员信息'
      }
      // {
      //   path: './unit-info',
      //   name: '企业信息'
      // },
      // {
      //   path: './bill-info',
      //   name: '票据信息'
      // },
      // {
      //   path: './offer-info',
      //   name: '报价信息'
      // },
      // {
      //   path: './trans-info',
      //   name: '交易信息'
      // }
    ]
    userInfo = {}

    async getUserDetail () {
      let id = this.$route.params.id
      let res: AjaxResponse = await this.$axios.get(`b/boms/user/view/${id}`)
      this.userInfo = res.data
    }

    mounted () {
      this.getUserDetail()
    }
  }
</script>

<style lang="less" scoped>
  .detail-container {
    display: flex;
    flex-direction: row;
  }

  .content {
    margin-left: 10px;
    display: flex;
    flex-direction: column;
  }

  .bg-fff {
    margin-top: 10px;
  }
</style>
